import React, {useEffect, useState} from "react";
import {Button, Drawer, Form, Input, message, Space, Spin} from "antd";
import {GroupCreateDrawerProp, GroupCreateFormProp} from "@/pages/script/modules";
import {scriptGroupCreate} from "@/api/script";

const GroupCreateDrawer: React.FC<GroupCreateDrawerProp> = ({visible, close}) => {

    const [spinning, setSpinning] = useState<boolean>(false);
    const [form] = Form.useForm<GroupCreateFormProp>();

    const submitData = () => {
        form.validateFields().then(async value => {
            const result = await scriptGroupCreate(value);
            message.success('创建分组成功')
            close(result)
        })
    }

    useEffect(() => {
        return () => {
            form.resetFields();
        }
    }, [])


    return <Drawer
        width='25vw'
        destroyOnClose
        maskClosable={false}
        onClose={() => close(undefined)}
        open={visible}
        title="创建分组"
        extra={
            <Space>
                <Button type="primary" danger onClick={() => close(undefined)} >关闭</Button>
                <Button type="primary" onClick={submitData}>保存</Button>
            </Space>
        }>
        <Spin tip="分组数据提交中......" spinning={spinning}>
            <Form labelCol={{ span: 5 }}
                  wrapperCol={{ span: 19 }}
                  form={form}
                  layout="horizontal"
                  name="form_in_modal"
            >
                <Form.Item name="title" label="分组名称" rules={[{ required: true, message: '请输入分组名称' }]}>
                    <Input placeholder="分组名称" />
                </Form.Item>
                <Form.Item name="workHome" label="工作目录" rules={[{ required: true, message: '请输入分组工作目录' }]}>
                    <Input placeholder="分组编码" />
                </Form.Item>
                <Form.Item name="desc" label="分组描述">
                    <Input.TextArea rows={3} placeholder="请输入分组描述" />
                </Form.Item>
            </Form>
        </Spin>
    </Drawer>
}

export default GroupCreateDrawer;
